<template>
  <div class="info-container">
    <el-row class="tac">
      <el-col :span="4">
        <el-menu
          :default-active="this.$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item-group>
            <el-menu-item index="/info">个人信息</el-menu-item>
            <el-menu-item index="/History">我的订单</el-menu-item>

            <el-menu-item index="/order">我的预约</el-menu-item>
            <el-menu-item index="/house">我的房源</el-menu-item>
            <el-menu-item index="/commodity">我的商品</el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-col>

      <el-col :span="20">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本资料</span>
            </div>
            <div>
              <el-form label-width="90px" v-model="dataFrom" size="small" label-position="right">
                <el-form-item label="用户昵称：" prop="nickName">
                  <a>农经纪人</a>
                </el-form-item>
                <el-form-item label="手机号：" prop="phone">
                  <a>1821321035</a>
                </el-form-item>
                <el-form-item label="身份认证:" prop="state">
                  <a>已认证</a>
                </el-form-item>
                <el-form-item label="经纪人认证:" prop="vip">
                  <a>已认证</a>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        name: '',
        id: '',
        amount: '',
        type: ''
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
      dataForm: {
        nickName: '超级管理员',
        phone: '173567777777',
        homeUrl: 'http://www.baidu.com',
        state: '未认证',
        vip: '未认证'
      }
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
